<style>
    * { box-sizing: border-box; }
    body { 
      font-family: 'Calibri', Arial, sans-serif; 
      font-size: 9pt; 
      color: #0c0c0c; 
      margin: 0; 
      padding: 20px; 
      background: #ffffff; 
    }
    
    .invoice-container { 
      max-width: 800px; 
      margin: 0 auto; 
      background: #ffffff; 
    }
    
    .invoice-header { 
      display: flex; 
      justify-content: space-between; 
      align-items: flex-start; 
      margin-bottom: 20px; 
    }
    
    .invoice-title { 
      font-size: 20px; 
      font-weight: 700; 
      letter-spacing: 1px; 
      color: #0c0c0c; 
      margin-bottom: 10px;
    }
    
    .invoice-meta { 
      font-size: 12px; 
      color: #666; 
    }
    
    .invoice-meta table { 
      width: 100%; 
      border-collapse: collapse; 
    }
    
    .invoice-meta td { 
      padding: 4px 8px; 
      border: none; 
    }
    
    .invoice-meta .label { 
      font-weight: 600; 
      width: 120px; 
    }
    
    .address-section { 
      display: flex; 
      justify-content: space-between; 
      margin-bottom: 20px; 
    }
    
    .address-block { 
      width: 48%; 
    }
    
    .address-title { 
      font-weight: 600; 
      font-size: 12px; 
      margin-bottom: 8px; 
      color: #0c0c0c; 
    }
    
    .address-content { 
      font-size: 11px; 
      line-height: 1.4; 
      color: #333; 
    }
    
    .items-table { 
      width: 100%; 
      border-collapse: collapse; 
      margin-top: 20px; 
    }
    
    .items-table th, 
    .items-table td { 
      border: 1px solid #d8d8d8; 
      padding: 8px; 
      text-align: left; 
      vertical-align: top; 
    }
    
    .items-table th { 
      background-color: #f1f1f1; 
      font-weight: 600; 
      font-size: 9px; 
      text-transform: uppercase; 
      letter-spacing: 0.3px; 
    }
    
    .items-table .text-right { 
      text-align: right; 
    }
    
    .item-code { 
      font-size: 9px; 
      color: #0c0c0c; 
    }
    
    .item-name { 
      font-weight: 600; 
      font-size: 9px; 
      color: #0c0c0c; 
    }
    
    .item-description { 
      font-size: 8px; 
      color: #666; 
      margin-top: 2px; 
    }
    
    .totals-table { 
      width: 100%; 
      border-collapse: collapse; 
      margin-top: 20px; 
    }
    
    .totals-table td { 
      padding: 6px 8px; 
      border: none; 
    }
    
    .totals-table .label { 
      text-align: left; 
      font-size: 10px; 
    }
    
    .totals-table .amount { 
      text-align: right; 
      font-size: 10px; 
    }
    
    .totals-table .grand-total { 
      font-weight: 700; 
      font-size: 10px; 
    }
    
    .payment-section { 
      margin-top: 30px; 
      padding: 15px; 
      background-color: #f9fafb; 
      border: 1px dashed #ccc; 
    }
    
    .payment-title { 
      font-weight: 600; 
      font-size: 9px; 
      margin-bottom: 8px; 
      color: #0c0c0c; 
    }
    
    .payment-content { 
      font-size: 9px; 
      color: #666; 
    }
    
    .company-info { 
      margin-top: 20px; 
      font-size: 11px; 
      color: #444; 
      line-height: 1.6; 
    }
    
    .company-name { 
      font-weight: 600; 
      margin-bottom: 5px; 
    }
    
    .terms-section {
      margin-top: 20px;
      padding: 15px;
      background-color: #f9fafb;
      border: 1px solid #ddd;
    }
    
    .terms-title {
      font-weight: 600;
      font-size: 12px;
      margin-bottom: 10px;
      color: #0c0c0c;
    }
    
    .terms-content {
      font-size: 10px;
      color: #333;
      line-height: 1.4;
    }
    
    .bank-details {
      margin-top: 20px;
      padding: 15px;
      background-color: #f9fafb;
      border: 1px solid #ddd;
    }
    
    .bank-title {
      font-weight: 600;
      font-size: 12px;
      margin-bottom: 10px;
      color: #0c0c0c;
    }
    
    .bank-content {
      font-size: 10px;
      color: #333;
      line-height: 1.4;
    }
    
    .bank-content table {
      width: 100%;
      border-collapse: collapse;
    }
    
    .bank-content td {
      padding: 4px 8px;
      border: none;
    }
    
    .bank-content .label {
      font-weight: 600;
      width: 120px;
    }
  </style>
  
  <div class="invoice-container">
    <!-- 头部信息 -->
    <div class="invoice-header">
      <div>
        <div class="invoice-title">SALES ORDER</div>
        <div class="invoice-meta">
          <table>
            <tr>
              <td class="label">Order Date:</td>
              <td>{{ doc.transaction_date if doc.transaction_date else "N/A" }}</td>
            </tr>
            <tr>
              <td class="label">Order Number:</td>
              <td>{{ doc.name if doc.name else "N/A" }}</td>
            </tr>
            <tr>
              <td class="label">Reference:</td>
              <td>{{ doc.po_no if doc.po_no else "" }}</td>
            </tr>
            <tr>
              <td class="label">Delivery Date:</td>
              <td>{{ doc.delivery_date if doc.delivery_date else "" }}</td>
            </tr>
            {% if doc.po_date %}
            <tr>
              <td class="label">PO Date:</td>
              <td>{{ doc.po_date if doc.po_date else "" }}</td>
            </tr>
            {% endif %}
          </table>
        </div>
      </div>
      <div>
        <div class="invoice-meta">
          <table>
            <tr>
              <td class="label">Company:</td>
              <td>{{ doc.company if doc.company else "N/A" }}</td>
            </tr>
            <tr>
              <td class="label">Currency:</td>
              <td>{{ doc.currency if doc.currency else "N/A" }}</td>
            </tr>
            <tr>
              <td class="label">Status:</td>
              <td>{{ doc.status if doc.status else "N/A" }}</td>
            </tr>
            {% if doc.order_type %}
            <tr>
              <td class="label">Order Type:</td>
              <td>{{ doc.order_type if doc.order_type else "" }}</td>
            </tr>
            {% endif %}
          </table>
        </div>
      </div>
    </div>
  
    <!-- 地址信息 -->
    <div class="address-section">
      <div class="address-block">
        <div class="address-title">Bill To</div>
        <div class="address-content">
          {{ doc.customer_name if doc.customer_name else (doc.customer if doc.customer else "N/A") }}<br>
          {{ doc.address_display if doc.address_display else "" }}<br>
          {% if doc.tax_id %}
            Tax ID: {{ doc.tax_id }}
          {% endif %}
          {% if doc.contact_display %}
            <br>Contact: {{ doc.contact_display }}
          {% endif %}
        </div>
      </div>
      <div class="address-block">
        <div class="address-title">Ship To</div>
        <div class="address-content">
          {{ doc.customer_name if doc.customer_name else (doc.customer if doc.customer else "N/A") }}<br>
          {{ doc.shipping_address if doc.shipping_address else "" }}
          {% if doc.dispatch_address %}
            <br><br>Dispatch Address:<br>
            {{ doc.dispatch_address if doc.dispatch_address else "" }}
          {% endif %}
        </div>
      </div>
    </div>
  
    <!-- 项目表格 -->
    <table class="items-table">
      <thead>
        <tr>
          <th style="width:12%;">Item Code</th>
          <th>Item Description</th>
          <th style="width:7%;" class="text-right">Qty</th>
          <th style="width:10%;" class="text-right">Unit Price</th>
          <th style="width:8%;" class="text-right">Disc %</th>
          <th style="width:10%;" class="text-right">Discount</th>
          <th style="width:10%;" class="text-right">Net Price</th>
          <th style="width:10%;" class="text-right">Tax</th>
          <th style="width:12%;" class="text-right">Amount</th>
        </tr>
      </thead>
      <tbody>
        {% if doc.items %}
          {% for item in doc.items %}
          <tr>
            <td class="item-code">{{ item.item_code if item.item_code else "N/A" }}</td>
            <td>
              <div class="item-name">{{ item.item_name if item.item_name else "N/A" }}</div>
              <div class="item-description">{{ item.description if item.description else "" }}</div>
              {% if item.item_group %}
                <div class="item-description">Group: {{ item.item_group }}</div>
              {% endif %}
            </td>
            <td class="text-right">{{ item.qty if item.qty else 0 }}</td>
            <td class="text-right">{{ item.rate if item.rate else 0 }}</td>
            <td class="text-right">{{ item.discount_percentage if item.discount_percentage else 0 }}</td>
            <td class="text-right">{{ (item.qty * item.rate - item.amount) if item.qty and item.rate and item.amount else 0 }}</td>
            <td class="text-right">{{ (item.amount / item.qty) if item.qty and item.amount and item.qty > 0 else 0 }}</td>
            <td class="text-right">{{ item.item_tax_template if item.item_tax_template else "" }}</td>
            <td class="text-right">{{ item.amount if item.amount else 0 }}</td>
          </tr>
          {% endfor %}
        {% else %}
          <tr>
            <td colspan="9" style="text-align: center; padding: 20px; color: #666;">No items found</td>
          </tr>
        {% endif %}
      </tbody>
    </table>
  
    <!-- 总计表格 -->
    <table class="totals-table">
      <tr>
        <td class="label" style="width:60%;"></td>
        <td class="label">Total Discount</td>
        <td class="amount">{{ doc.discount_amount if doc.discount_amount else 0 }}</td>
      </tr>
      <tr>
        <td></td>
        <td class="label">Subtotal</td>
        <td class="amount">{{ doc.net_total if doc.net_total else 0 }}</td>
      </tr>
      {% if doc.taxes %}
        {% for tax in doc.taxes %}
          {% if tax.tax_amount and tax.tax_amount != 0 %}
          <tr>
            <td></td>
            <td class="label">Total {{ tax.description if tax.description else (tax.account_head if tax.account_head else "Tax") }}</td>
            <td class="amount">{{ tax.tax_amount if tax.tax_amount else 0 }}</td>
          </tr>
          {% endif %}
        {% endfor %}
      {% endif %}
      <tr class="grand-total">
        <td></td>
        <td class="label">Order Total ({{ doc.currency if doc.currency else "USD" }})</td>
        <td class="amount">{{ doc.grand_total if doc.grand_total else 0 }}</td>
      </tr>
    </table>
  
    <!-- 支付信息 -->
    <div class="payment-section">
      <div class="payment-title">Payment Information</div>
      <div class="payment-content">
        Please contact us for payment details and terms.
        {% if doc.payment_terms_template %}
          <br><br>Payment Terms: {{ doc.payment_terms_template }}
        {% endif %}
      </div>
    </div>
  
    <!-- 银行信息 -->
    <div class="bank-details">
      <div class="bank-title">Pay By EFT - Bank Details</div>
      <div class="bank-content">
        <table>
          <tr>
            <td class="label">Bank:</td>
            <td>Commonwealth Bank of Australia, 48 Martin Place Sydney NSW 2000, BIC/SWIFT: CTBAAU2S</td>
          </tr>
          <tr>
            <td class="label">Account name:</td>
            <td>Envirolution Group</td>
          </tr>
          <tr>
            <td class="label">BSB:</td>
            <td>063 177</td>
          </tr>
          <tr>
            <td class="label">Account Number:</td>
            <td>1029 1944 (AUD Only)</td>
          </tr>
        </table>
      </div>
    </div>
  
    <!-- 条款和条件 -->
    {% if doc.terms %}
    <div class="terms-section">
      <div class="terms-title">Terms and Conditions</div>
      <div class="terms-content">{{ doc.terms if doc.terms else "" }}</div>
    </div>
    {% endif %}
  
    <!-- 公司信息 -->
    <div class="company-info">
      <div class="company-name">{{ doc.company if doc.company else "Company Name" }}</div>
      {{ doc.company_address_display if doc.company_address_display else "Company Address" }}<br>
      {% if doc.company_contact_person %}
        Contact: {{ doc.company_contact_person }}<br>
      {% endif %}
      {% if doc.contact_phone %}
        Phone: {{ doc.contact_phone }}<br>
      {% endif %}
      {% if doc.contact_email %}
        Email: {{ doc.contact_email }}<br>
      {% endif %}
    </div>
  </div>